import useScroll from "@/hooks/useScroll.js";
import {ref, watch} from "vue";

/**
 * 更改头部动画
 * @param elRef
 * @returns {Ref<UnwrapRef<number>>}
 */
export function useScrollWatch(elRef){
    let { scrollTop } = useScroll(elRef);
    let titleSlide = ref(0)
    watch(scrollTop, (newValue, oldValue) => {
        // console.log("watch 已触发", newValue)
        // -1 下拉 0什么都不做 1上拉
        if(newValue > oldValue && newValue > 9.6){
            // 执行动画
            titleSlide.value = 1
        }else if(newValue < oldValue && newValue <= 9.6){
            titleSlide.value = -1
        }
    });
    return titleSlide;
}

/**
 * 改变头部样式，给stick布局添加高度，更加美观
 * @param titleSlide
 * @param stickyRef
 */
export function useScrollWatch2(titleSlide,stickyRef){
    watch(titleSlide, (newValue, oldValue) => {
        // console.log("watch 已触发", newValue)
        // 获取子元素的总高度
        let children = stickyRef.value.$el.children
        let sumOffsetHeight = 0
        for(let i = 0;i<children.length;i++){
            sumOffsetHeight += children[i].offsetHeight
        }
        if (newValue === -1){
            stickyRef.value.$el.style.height = sumOffsetHeight + 'px'
        }else if(newValue === 1){
            stickyRef.value.$el.style.height = sumOffsetHeight + 10 + 'px'
        }
    });
}
